import * as React from 'react';
import { connect } from 'react-redux';
import ReactCustomScrollBars from 'react-custom-scrollbars';

import { message, Row, Col } from 'antd';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadablePopToSort = LoadableComponent(() => import('components/common/PopToSort'));
const LoadablePageList = LoadableComponent(() => import('components/common/ItemList'));
const LoadablePageEdit = LoadableComponent(() => import('./PageEdit'));

import { fetchPageList, removePage, sortPages } from 'actions/preview';

interface IndexProps {
  dispatch: (action: any) => any;
  previewId: number;
  pageList: any[];
}
interface IndexState {
  isSortPage: boolean;
  editPageId: any;
}

class PageIndex extends React.Component<IndexProps, IndexState> {
  static defaultProps: IndexProps = {
    dispatch: () => {},
    previewId: 0,
    pageList: [],
  };
  constructor(props: IndexProps) {
    super(props);
    this.state = {
      isSortPage: false,
      editPageId: null,
    };
  }

  componentDidMount() {
    if (this.props.previewId) {
      this.handleFetchPageList();
    }
  }

  componentWillReceiveProps(nextProps: any) {
    const { previewId } = nextProps;
    const { previewId: oldPreviewId } = this.props;

    if (previewId !== oldPreviewId) {
      this.handleFetchPageList(previewId);
      this.handleEdit(null);
    }
  }

  handleFetchPageList = (previewId: number = this.props.previewId, callback = () => {}) => {
    const { dispatch } = this.props;
    dispatch(fetchPageList(previewId)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        callback();
      }
    });
  };

  newPageCallback = (editPageId: number) => {
    this.handleFetchPageList(this.props.previewId, () => {
      this.setState({
        editPageId,
      });
    });
  };

  handleSortCancel = () => {
    this.setState({
      isSortPage: false,
    });
  };

  handleSortBook = () => {
    this.setState({
      isSortPage: true,
    });
  };

  handleSortOk = (sortedIds: number[]) => {
    const { dispatch, previewId } = this.props;

    dispatch(sortPages(previewId, sortedIds)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.handleFetchPageList(previewId);
        this.setState({
          isSortPage: false,
        });
        message.success('保存成功');
      }
    });
  };

  handleEdit = (editPageId: any = 0) => {
    this.setState({
      editPageId,
    });
  };

  handleRemove = (editPageId: any) => {
    const { dispatch, previewId } = this.props;
    dispatch(removePage(previewId, editPageId)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.handleFetchPageList(previewId);
        this.setState({
          editPageId: null,
        });
        message.success('删除成功');
      }
    });
  };

  render() {
    const { editPageId, isSortPage } = this.state;
    const { previewId, pageList } = this.props;

    return (
      <div>
        {isSortPage && (
          <LoadablePopToSort
            sortName="页面排序"
            items={pageList}
            onCancel={this.handleSortCancel}
            onOk={this.handleSortOk}
          />
        )}
        <Row>
          <Col span={5}>
            <div className="steps-wrap">
              <ReactCustomScrollBars>
                <LoadablePageList
                  parentId={previewId}
                  activeId={editPageId}
                  items={pageList}
                  onSort={this.handleSortBook}
                  onEdit={this.handleEdit}
                  onRemove={this.handleRemove}
                  title="页面"
                />
              </ReactCustomScrollBars>
            </div>
          </Col>
          {editPageId !== null && (
          <Col span={19}>
              <div>
                <LoadablePageEdit
                  previewId={previewId}
                  pageId={editPageId}
                  newPageCallback={this.newPageCallback}
                />
              </div>
          </Col>
          )}
        </Row>
      </div>
    );
  }
}

interface OwnProps {
  previewId: number;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { previewId } = ownProps;
  const { pageList } = state.preview;

  return {
    previewId,
    pageList,
  };
}

export default connect(mapStateToProps)(PageIndex);
